<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>

<div class="btn btn-primary hidden btn-lg btn-replay" id="btn_replay">再玩一次</div>

<div class="container" id="container">
</div>

<script type="text/template" id="view_1">

    <h1 class="text-center">1. 点击选择有你姓氏的那张卡片</h1>
    <br>

    <% _.each(data, function(row) { %>
    <div class="row">
        <% _.each(row, function(col) { %>
        <div class="col-xs-3">
            <div class="card clearfix">
                <% _.each(col, function(char) { %>
                <span>
                    <%=char %>
                </span>
                <% }) %>
            </div>
        </div>
        <% }) %>
    </div>

    <br>
    <% }) %>
</script>

<script type="text/template" id="view_2">

    <h1 class="text-center">2. 再次点击选择有你姓氏的那张卡片, 翻掉牌</h1>

    <br>

    <% _.each(data, function(row) { %>
    <div class="row">
        <% _.each(row, function(col) { %>
        <div class="col-xs-3">
            <div class="card clearfix">
                <% _.each(col, function(char) { %>
                <span>
                    <%=char %>
                </span>
                <% }) %>
            </div>
        </div>
        <% }) %>
    </div>

    <br>
    <% }) %>
</script>


<script src="/js/jquery-2.2.4.js"></script>
<script src="/js/lodash.js"></script>
<script>

    $(function() {
	    renderView1();


	    var clickIndex1 = 0;
	    var clickIndex2 = 0;

	    $('.card').on('click', function() {
            clickIndex1 = $('.card').index(this);

            renderView2();

		    $('.card').on('click', function() {
			    clickIndex2 = $('.card').index(this);

			    $('#btn_replay').removeClass('hidden');

			    $(this).addClass('flipped');

			    console.log(clickIndex1, clickIndex2);

			    var view2Data = _.flatten(getView2Data());

			    console.log(view2Data[clickIndex2][clickIndex1]);

			    // do it in next tick
			    setTimeout(function() {
				    alert('我猜你姓:  ' + view2Data[clickIndex2][clickIndex1] +' !^_^Y');
                },1);


		    });

        });
    });

    function getView1Data() {
        return [[["赵","何","云","酆","乐","姚","熊","江","虞","郁","荀","乌","宁","郜","池","宰","别","廖","殳","简","竺","政","木","里"],["钱","吕","苏","鲍","于","邵","纪","童","万","单","羊","焦","仇","黎","乔","郦","庄","庾","沃","饶","权","淳","西","南"],["孙","施","潘","史","时","湛","舒","颜","支","杭","於","巴","栾","蓟","阴","雍","晏","终","利","空","逑","太","漆","门"],["李","张","葛","唐","傅","汪","屈","郭","柯","洪","惠","弓","暴","薄","胥","郤","柴","暨","蔚","曾","盖","叔","雕","呼"]],[["周","孔","奚","费","皮","祁","项","梅","昝","包","甄","牧","甘","印","能","璩","瞿","居","越","毋","益","轩","正","延"],["吴","曹","范","廉","卞","毛","祝","盛","管","诸","麹","隗","斜","宿","苍","桑","阎","衡","夔","沙","桓","辕","壤","归"],["郑","严","彭","岑","齐","禹","董","林","卢","左","家","山","厉","白","双","桂","充","步","隆","乜","公","令","驷","海"],["王","华","郎","薛","康","狄","梁","刁","莫","石","封","谷","戎","怀","闻","濮","慕","都","师","养","俟","狐","良","舌"]],[["冯","金","鲁","雷","伍","米","杜","锺","经","崔","芮","车","祖","蒲","莘","牛","连","耿","巩","鞠","上","离","拓","微"],["陈","魏","韦","贺","余","贝","阮","徐","房","吉","羿","侯","武","邰","党","寿","茹","满","厍","须","官","宇","拔","生"],["楮","陶","昌","倪","元","明","蓝","丘","裘","钮","储","宓","符","从","翟","通","习","弘","聂","丰","阳","长","夹","岳"],["卫","姜","马","汤","卜","臧","闽","骆","缪","龚","靳","蓬","刘","鄂","谭","边","宦","匡","晁","巢","人","鲜","父","帅"]],[["蒋","戚","苗","滕","顾","计","席","高","干","程","汲","全","景","索","贡","扈","艾","国","勾","关","赫","闾","晋","缑"],["沈","谢","凤","殷","孟","伏","季","夏","解","嵇","邴","郗","詹","咸","劳","燕","鱼","文","敖","蒯","皇","徒","楚","亢"],["韩","邹","花","罗","平","成","麻","蔡","应","邢","糜","班","束","籍","逄","冀","容","寇","融","相","甫","丌","法","况"],["杨","喻","方","毕","黄","戴","强","田","宗","滑","松","仰","龙","赖","姬","郏","向","广","冷","查","尉","仉","汝","有"]],[["朱","柏","俞","郝","和","谈","贾","樊","丁","裴","井","秋","叶","卓","申","浦","古","禄","訾","后","迟","督","鄢","琴"],["秦","水","任","邬","穆","宋","路","胡","宣","陆","段","仲","幸","蔺","扶","尚","易","阙","辛","荆","澹","子","涂","商"],["尤","窦","袁","安","萧","茅","娄","凌","贲","荣","富","伊","司","屠","堵","农","慎","东","阚","红","台","颛","钦","牟"],["许","章","柳","常","尹","庞","危","霍","邓","翁","巫","宫","韶","蒙","冉","温","戈","欧","那","游","冶","端","百","佘"]]];
    }

    function getView2Data() {
	    return [[["赵","钱","孙","李","周","吴","郑","王","冯","陈","楮","卫","蒋","沈","韩","杨","朱","秦","尤","许"],["何","吕","施","张","孔","曹","严","华","金","魏","陶","姜","戚","谢","邹","喻","柏","水","窦","章"],["云","苏","潘","葛","奚","范","彭","郎","鲁","韦","昌","马","苗","凤","花","方","俞","任","袁","柳"],["酆","鲍","史","唐","费","廉","岑","薛","雷","贺","倪","汤","滕","殷","罗","毕","郝","邬","安","常"]],[["乐","于","时","傅","皮","卞","齐","康","伍","余","元","卜","顾","孟","平","黄","和","穆","萧","尹"],["姚","邵","湛","汪","祁","毛","禹","狄","米","贝","明","臧","计","伏","成","戴","谈","宋","茅","庞"],["熊","纪","舒","屈","项","祝","董","梁","杜","阮","蓝","闽","席","季","麻","强","贾","路","娄","危"],["江","童","颜","郭","梅","盛","林","刁","锺","徐","丘","骆","高","夏","蔡","田","樊","胡","凌","霍"]],[["虞","万","支","柯","昝","管","卢","莫","经","房","裘","缪","干","解","应","宗","丁","宣","贲","邓"],["郁","单","杭","洪","包","诸","左","石","崔","吉","钮","龚","程","嵇","邢","滑","裴","陆","荣","翁"],["荀","羊","於","惠","甄","麹","家","封","芮","羿","储","靳","汲","邴","糜","松","井","段","富","巫"],["乌","焦","巴","弓","牧","隗","山","谷","车","侯","宓","蓬","全","郗","班","仰","秋","仲","伊","宫"]],[["宁","仇","栾","暴","甘","斜","厉","戎","祖","武","符","刘","景","詹","束","龙","叶","幸","司","韶"],["郜","黎","蓟","薄","印","宿","白","怀","蒲","邰","从","鄂","索","咸","籍","赖","卓","蔺","屠","蒙"],["池","乔","阴","胥","能","苍","双","闻","莘","党","翟","谭","贡","劳","逄","姬","申","扶","堵","冉"],["宰","郦","雍","郤","璩","桑","桂","濮","牛","寿","通","边","扈","燕","冀","郏","浦","尚","农","温"]],[["别","庄","晏","柴","瞿","阎","充","慕","连","茹","习","宦","艾","鱼","容","向","古","易","慎","戈"],["廖","庾","终","暨","居","衡","步","都","耿","满","弘","匡","国","文","寇","广","禄","阙","东","欧"],["殳","沃","利","蔚","越","夔","隆","师","巩","厍","聂","晁","勾","敖","融","冷","訾","辛","阚","那"],["简","饶","空","曾","毋","沙","乜","养","鞠","须","丰","巢","关","蒯","相","查","后","荆","红","游"]],[["竺","权","逑","盖","益","桓","公","俟","上","官","阳","人","赫","皇","甫","尉","迟","澹","台","冶"],["政","淳","太","叔","轩","辕","令","狐","离","宇","长","鲜","闾","徒","丌","仉","督","子","颛","端"],["木","西","漆","雕","正","壤","驷","良","拓","拔","夹","父","晋","楚","法","汝","鄢","涂","钦","百"],["里","南","门","呼","延","归","海","舌","微","生","岳","帅","缑","亢","况","有","琴","商","牟","佘"]],[["佴","伯","赏","墨","哈","谯","笪","年","爱","佟"]]];
    }

    function renderView1() {
	    var viewData1 = getView1Data();


	    var template = $('#view_1').text();
	    var compiled = _.template(template);
	    var html = compiled({data: viewData1});
	    $('#container').html(html);

    }

    function renderView2() {
	    var viewData2 = getView2Data();

	    var template = $('#view_2').text();
	    var compiled = _.template(template);
	    var html = compiled({data: viewData2});
	    $('#container').html(html);
    }
</script>


<script>

	var viewCharArr = [[["赵","钱","孙","李","周","吴","郑","王","冯","陈","楮","卫","蒋","沈","韩","杨","朱","秦","尤","许"],["何","吕","施","张","孔","曹","严","华","金","魏","陶","姜","戚","谢","邹","喻","柏","水","窦","章"],["云","苏","潘","葛","奚","范","彭","郎","鲁","韦","昌","马","苗","凤","花","方","俞","任","袁","柳"],["酆","鲍","史","唐","费","廉","岑","薛","雷","贺","倪","汤","滕","殷","罗","毕","郝","邬","安","常"]],[["乐","于","时","傅","皮","卞","齐","康","伍","余","元","卜","顾","孟","平","黄","和","穆","萧","尹"],["姚","邵","湛","汪","祁","毛","禹","狄","米","贝","明","臧","计","伏","成","戴","谈","宋","茅","庞"],["熊","纪","舒","屈","项","祝","董","梁","杜","阮","蓝","闽","席","季","麻","强","贾","路","娄","危"],["江","童","颜","郭","梅","盛","林","刁","锺","徐","丘","骆","高","夏","蔡","田","樊","胡","凌","霍"]],[["虞","万","支","柯","昝","管","卢","莫","经","房","裘","缪","干","解","应","宗","丁","宣","贲","邓"],["郁","单","杭","洪","包","诸","左","石","崔","吉","钮","龚","程","嵇","邢","滑","裴","陆","荣","翁"],["荀","羊","於","惠","甄","麹","家","封","芮","羿","储","靳","汲","邴","糜","松","井","段","富","巫"],["乌","焦","巴","弓","牧","隗","山","谷","车","侯","宓","蓬","全","郗","班","仰","秋","仲","伊","宫"]],[["宁","仇","栾","暴","甘","斜","厉","戎","祖","武","符","刘","景","詹","束","龙","叶","幸","司","韶"],["郜","黎","蓟","薄","印","宿","白","怀","蒲","邰","从","鄂","索","咸","籍","赖","卓","蔺","屠","蒙"],["池","乔","阴","胥","能","苍","双","闻","莘","党","翟","谭","贡","劳","逄","姬","申","扶","堵","冉"],["宰","郦","雍","郤","璩","桑","桂","濮","牛","寿","通","边","扈","燕","冀","郏","浦","尚","农","温"]],[["别","庄","晏","柴","瞿","阎","充","慕","连","茹","习","宦","艾","鱼","容","向","古","易","慎","戈"],["廖","庾","终","暨","居","衡","步","都","耿","满","弘","匡","国","文","寇","广","禄","阙","东","欧"],["殳","沃","利","蔚","越","夔","隆","师","巩","厍","聂","晁","勾","敖","融","冷","訾","辛","阚","那"],["简","饶","空","曾","毋","沙","乜","养","鞠","须","丰","巢","关","蒯","相","查","后","荆","红","游"]],[["竺","权","逑","盖","益","桓","公","俟","上","官","阳","人","赫","皇","甫","尉","迟","澹","台","冶"],["政","淳","太","叔","轩","辕","令","狐","离","宇","长","鲜","闾","徒","丌","仉","督","子","颛","端"],["木","西","漆","雕","正","壤","驷","良","拓","拔","夹","父","晋","楚","法","汝","鄢","涂","钦","百"],["里","南","门","呼","延","归","海","舌","微","生","岳","帅","缑","亢","况","有","琴","商","牟","佘"]],[["佴","伯","赏","墨","哈","谯","笪","年","爱","佟"]]];

	var charArr2 = [["赵","钱","孙","李","周","吴","郑","王","冯","陈","楮","卫","蒋","沈","韩","杨","朱","秦","尤","许"],["何","吕","施","张","孔","曹","严","华","金","魏","陶","姜","戚","谢","邹","喻","柏","水","窦","章"],["云","苏","潘","葛","奚","范","彭","郎","鲁","韦","昌","马","苗","凤","花","方","俞","任","袁","柳"],["酆","鲍","史","唐","费","廉","岑","薛","雷","贺","倪","汤","滕","殷","罗","毕","郝","邬","安","常"],["乐","于","时","傅","皮","卞","齐","康","伍","余","元","卜","顾","孟","平","黄","和","穆","萧","尹"],["姚","邵","湛","汪","祁","毛","禹","狄","米","贝","明","臧","计","伏","成","戴","谈","宋","茅","庞"],["熊","纪","舒","屈","项","祝","董","梁","杜","阮","蓝","闽","席","季","麻","强","贾","路","娄","危"],["江","童","颜","郭","梅","盛","林","刁","锺","徐","丘","骆","高","夏","蔡","田","樊","胡","凌","霍"],["虞","万","支","柯","昝","管","卢","莫","经","房","裘","缪","干","解","应","宗","丁","宣","贲","邓"],["郁","单","杭","洪","包","诸","左","石","崔","吉","钮","龚","程","嵇","邢","滑","裴","陆","荣","翁"],["荀","羊","於","惠","甄","麹","家","封","芮","羿","储","靳","汲","邴","糜","松","井","段","富","巫"],["乌","焦","巴","弓","牧","隗","山","谷","车","侯","宓","蓬","全","郗","班","仰","秋","仲","伊","宫"],["宁","仇","栾","暴","甘","斜","厉","戎","祖","武","符","刘","景","詹","束","龙","叶","幸","司","韶"],["郜","黎","蓟","薄","印","宿","白","怀","蒲","邰","从","鄂","索","咸","籍","赖","卓","蔺","屠","蒙"],["池","乔","阴","胥","能","苍","双","闻","莘","党","翟","谭","贡","劳","逄","姬","申","扶","堵","冉"],["宰","郦","雍","郤","璩","桑","桂","濮","牛","寿","通","边","扈","燕","冀","郏","浦","尚","农","温"],["别","庄","晏","柴","瞿","阎","充","慕","连","茹","习","宦","艾","鱼","容","向","古","易","慎","戈"],["廖","庾","终","暨","居","衡","步","都","耿","满","弘","匡","国","文","寇","广","禄","阙","东","欧"],["殳","沃","利","蔚","越","夔","隆","师","巩","厍","聂","晁","勾","敖","融","冷","訾","辛","阚","那"],["简","饶","空","曾","毋","沙","乜","养","鞠","须","丰","巢","关","蒯","相","查","后","荆","红","游"],["竺","权","逑","盖","益","桓","公","俟","上","官","阳","人","赫","皇","甫","尉","迟","澹","台","冶"],["政","淳","太","叔","轩","辕","令","狐","离","宇","长","鲜","闾","徒","丌","仉","督","子","颛","端"],["木","西","漆","雕","正","壤","驷","良","拓","拔","夹","父","晋","楚","法","汝","鄢","涂","钦","百"],["里","南","门","呼","延","归","海","舌","微","生","岳","帅","缑","亢","况","有","琴","商","牟","佘"]];


//	var charArr1 = [];
//	// 拼第一个数组
//	// console.log()
//	for(var i = 0; i<20; i++) {
//		if (!_.isArray(charArr1[i])) {
//			charArr1[i] = [];
//			console.log('hi')
//		}
//		_.each(charArr2, function(chars) {
//			if (chars[i]) {
//				charArr1[i].push(chars[i]);
//			}
//		});
//	}
//	var arr = _.chunk(charArr1, 4);
//	console.log(charArr1);
//	str = JSON.stringify(arr);


</script>

</body>
</html>